<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<canvas id="canvas" width="800" height="500"></canvas>
</body>
<script type="text/javascript" src="Collision.js"></script>
<script type="text/javascript">
	var canvas = document.getElementById('canvas'),
		context = canvas.getContext('2d'),

		shapes = [],
		polygonPoints = [
			// The paths described by these point arrays are open.
			// They are explicitly closed by Polygon.createPath()
			[new Point(250, 150), new Point(250, 250), new Point(350, 250)],
			[new Point(100, 100), new Point(100, 150), new Point(150, 150), new Point(150, 100)],
			[new Point(400, 100), new Point(380, 150), new Point(500, 150), new Point(520, 100)]
		],
		polygonStrokeStyles = ['blue', 'yellow', 'red'],
		polygonFillStyles = [
			'rgba(255, 255, 0, 0.7)',
			'rgba(100, 140, 230, 0.6)',
			'rgba(255, 255, 255, 0.8)'
		],

		mousedown = { x: 0, y: 0},
		lastdrag = {x: 0, y: 0},
		shapeBeingDragged = undefined;

// Functions..........................................................................................

	function windowToCanvas(x, y){
		var bbox = canvas.getBoundingClientRect();

		return {
			x: x - bbox.left * (canvas.width / bbox.width),
			y: y - bbox.top * (canvas.height / bbox.height)
		};
	}

	function drawShapes(){
		shapes.forEach(function(shape){
			shape.stroke(context);
			shape.fill(context);
		});
	}

	// 检查碰撞
	function detectCollision(){
		var textY = 30,
			numShapes = shapes.length,
			shape,
			i;

		for(i = 0; i < numShapes; ++i){
			shape = shapes[i];

			if(shape !== shapeBeingDragged){
				if(shapeBeingDragged.collidesWith(shape)){
					context.fillStyle = shape.fillStyle;
					context.fillText('collision', 20, textY);
					textY += 40;
				}
			}
		}
	}

// Event handlers........................................................................................

	canvas.onmousedown = function(e){
		var location = windowToCanvas(e.clientX, e.clientY);
		e.preventDefault();

		shapes.forEach(function(shape){
			if(shape.isPointInPath(context, location.x, location.y)){
				shapeBeingDragged = shape;
				
				mousedown.x = location.x;
				mousedown.y = location.y;

				lastdrag.x = location.x;
				lastdrag.y = location.y;
			}
		});
	};

	canvas.onmousemove = function(e){
		var location, dragVector;
		e.preventDefault();

		if(shapeBeingDragged !== undefined){
			location = windowToCanvas(e.clientX, e.clientY);
			dragVector = {
				x: location.x - lastdrag.x,
				y: location.y - lastdrag.y
			};

			shapeBeingDragged.move(dragVector.x, dragVector.y);

			lastdrag.x = location.x;
			lastdrag.y = location.y;

			context.clearRect(0, 0, canvas.width, canvas.height);
			drawShapes();
			detectCollision();
		}
	};

	canvas.onmouseup = function(e){
		e.preventDefault();
		shapeBeingDragged = undefined;
	};

// Initialization..................................................................................

	for(var i = 0; i < polygonPoints.length; i++){
		var polygon = new Polygon(),
			points = polygonPoints[i];

		polygon.strokeStyle = polygonStrokeStyles[i];
		polygon.fillStyle = polygonFillStyles[i];

		points.forEach(function(point){
			polygon.addPoint(point.x, point.y);
		});

		shapes.push(polygon);
	}

	context.shadowColor = 'rgba(100, 140, 255, 0.5)';
	context.shadowOffsetX = 2;
	context.shadowOffsetY = 2;
	context.shadowBlur = 4;
	context.font = '38px Arial';

	drawShapes();

	context.save();
	context.fillStyle = 'cornflowerblue';
	context.font = '24px Arial';
	context.fillText('Drag shapes over each other', 10, 25);
	context.restore();
</script>
</html>